<template>
  <div>
    <center><h3 style="font-family: 'MS Reference Specialty',serif">若兮角色权限详解</h3>
    <el-tabs style="width: 720px" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <span slot="label">
             <i class="el-icon-user-solid" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px">超级管理员</span>
             </i>
         </span><el-card class="box-card" style="width: 720px">
        <div slot="header" class="clearfix">
          <span>若兮超级管理员</span><br>
          <el-tag style="margin-top: 20px" type="danger">若兮微服务系统所有操作权限</el-tag>
          <el-tag style="margin-left: 200px" type="success">拥有者2人</el-tag>
          </div>
        <div class="text item">
          <center>
            <el-table
                :data="tableData1"
                style="width: 720px"
                row-key="id"
                align="center"
                border
                lazy
                :load="load"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <el-table-column
                  align="center"
                  prop="date"
                  label="权限序号"
                  width="180">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="name"
                  label="权限名称"
                  width="180">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="address"
                  label="权限描述">
              </el-table-column>
            </el-table>
          </center>
        </div>
      </el-card></el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label">
             <i class="el-icon-user" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px">用户管理员</span>
             </i>
         </span>用户管理员</el-tab-pane>
      <el-tab-pane name="third">
         <span slot="label">
             <i class="el-icon-user" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px">博客管理员</span>
             </i>
         </span>博客管理员</el-tab-pane>
      <el-tab-pane name="fourth">
        <span slot="label">
             <i class="el-icon-user" style="margin:0 25px 0 25px">
                 <span style="padding-left: 8px;font-size: 15px">游客管理员</span>
             </i>
         </span>游客管理员</el-tab-pane>
    </el-tabs>
    </center>
  </div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				tableData1: [{
					id: 3,
					date: '①',
					name: '管理员管理',
					address: '对管理员的增删改查',
					hasChildren: true
				},{
					id: 4,
					date: '②',
					name: '用户管理',
					address: '对用户的增删改查',
					hasChildren: true
				},{
					id: 5,
					date: '③',
					name: '博客管理',
					address: '对博客的增删改查',
					hasChildren: true
				}]
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			load(tree, treeNode, resolve) {
				setTimeout(() => {
					resolve([
						{
							id: 31,
							date: '1',
							name: '管理员查询权限',
							address: '查看管理员信息'
						}, {
							id: 32,
							date: '2',
							name: '管理员修改权限',
							address: '修改管理员信息'
						},
						{
							id: 32,
							date: '3',
							name: '管理员修改权限',
							address: '修改管理员信息'
						},
						{
							id: 32,
							date: '4',
							name: '管理员修改权限',
							address: '修改管理员信息'
						}
					])
				}, 1000)
			}
		}
	}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
